s<!--
 *  首页统计页面
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
  <div class="dashboard-container">
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num" style="color: #1db954;">{{ consumerCount }}</div>
              <div><i class="iconfont icon-r-team" style="font-size: 25px; color: #1db954;"> 用户总数</i></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num" style="color: #1db954;">{{ songCount }}</div>
              <div><i class="iconfont icon-r-paper" style="font-size: 25px; color: #1db954;"> 歌曲总数</i></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num" style="color: #1db954;">{{ singerCount }}</div>
              <div><i class="iconfont icon-r-love" style="font-size: 25px; color: #1db954;"> 歌手数量</i></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num" style="color: #1db954;">{{ songListCount }}</div>
              <div><i class="iconfont icon-r-list" style="font-size: 25px; color: #1db954;"> 歌单数量</i></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="section-title"><i class="iconfont icon-r-find" style="font-size: 28px; color: #1db954;"></i> 用户性别比例
        </h3>
        <div class="chart-container" style="background-color:white">
          <ve-pie :data="consumerSex" :theme="consumerSexTheme"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="section-title"><i class="iconfont icon-r-find" style="font-size: 28px; color: #1db954;"></i> 歌曲类型分布
        </h3>
        <div class="chart-container" style="background-color:white">
          <ve-histogram :data="songStyle" :theme="songStyleTheme"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="section-title"><i class="iconfont icon-r-find" style="font-size: 28px; color: #1db954;"></i> 歌手性别比例
        </h3>
        <div class="chart-container" style="background-color:white">
          <ve-pie :data="singerSex" :theme="singerSexTheme"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="section-title"><i class="iconfont icon-r-find" style="font-size: 28px; color: #1db954;"></i> 歌手国籍分布
        </h3>
        <div class="chart-container" style="background-color:white">
          <ve-histogram :data="country" :theme="countryTheme"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getAllConsumer, allSong, getAllSinger, getAllSongList } from '../api/index';
export default {
  data () {
    return {
      consumerCount: 0,       //用户总数
      songCount: 0,           //歌曲总数
      singerCount: 0,         //歌手数量
      songListCount: 0,        //歌单数量
      consumer: [],            //所有用户
      consumerSex: {           //按性别分类的用户数
        columns: ['性别', '总数'],
        rows: [
          { '性别': '男', '总数': 0 },
          { '性别': '女', '总数': 0 }
        ]
      },
      consumerSexTheme: {
        color: ['#1db954', '#6495ED'],
        label: {
          normal: {
            textStyle: {
              color: '#b3b3b3'
            }
          }
        },
        tooltip: {
          textStyle: {
            color: '#b3b3b3'
          }
        }
      },
      songStyle: {           //按歌单风格分类
        columns: ['风格', '总数'],
        rows: [
          { '风格': '华语', '总数': 0 },
          { '风格': '粤语', '总数': 0 },
          { '风格': '欧美', '总数': 0 },
          { '风格': '日韩', '总数': 0 },
          { '风格': 'BGM', '总数': 0 },
          { '风格': '轻音乐', '总数': 0 },
          { '风格': '乐器', '总数': 0 }
        ]
      },
      songStyleTheme: {
        color: ['#1db954', '#FFA07A', '#9370DB', '#00BFFF', '#FFD700', '#3CB371', '#4682B4'],
        label: {
          normal: {
            textStyle: {
              color: '#b3b3b3'
            }
          }
        },
        tooltip: {
          textStyle: {
            color: '#b3b3b3'
          }
        }
      },
      singerSex: {           //按性别分类的歌手数
        columns: ['性别', '总数'],
        rows: [
          { '性别': '女', '总数': 0 },
          { '性别': '男', '总数': 0 },
          { '性别': '组合', '总数': 0 },
          { '性别': '不明', '总数': 0 }
        ]
      },
      singerSexTheme: {
        color: ['#FFC0CB', '#1db954', '#DAA520', '#87CEFA'],
        label: {
          normal: {
            textStyle: {
              color: '#b3b3b3'
            }
          }
        },
        tooltip: {
          textStyle: {
            color: '#b3b3b3'
          }
        }
      },
      country: {
        columns: ['国籍', '总数'],
        rows: [
          { '国籍': '中国', '总数': 0 },
          { '国籍': '韩国', '总数': 0 },
          { '国籍': '日本', '总数': 0 },
          { '国籍': '美国', '总数': 0 },
          { '国籍': '新加坡', '总数': 0 },
          { '国籍': '意大利', '总数': 0 },
          { '国籍': '马来西亚', '总数': 0 },
          { '国籍': '西班牙', '总数': 0 }
        ]
      },
      countryTheme: {
        color: ['#1db954', '#FF6347', '#00CED1', '#FFD700', '#4169E1', '#FFA500', '#32CD32', '#8A2BE2'],
        label: {
          normal: {
            textStyle: {
              color: '#b3b3b3'
            }
          }
        },
        tooltip: {
          textStyle: {
            color: '#b3b3b3'
          }
        }
      },
      options: {
        color: ['#87cefa', '#ffc0cb']
      },
      options1: {
        color: ['yellow']
      }
    }
  },
  created () {

  },
  mounted () {
    this.getConsumer();
    this.getSong();
    this.getSinger();
    this.getSongList();
  },
  methods: {
    getConsumer () {                     //用户总数
      getAllConsumer().then(res => {
        this.consumer = res;
        this.consumerCount = res.length;
        this.consumerSex.rows[0]['总数'] = this.setSex(1, this.consumer);
        this.consumerSex.rows[1]['总数'] = this.setSex(0, this.consumer);
      })
    },
    setSex (sex, val) {              //根据性别获取用户数
      let count = 0;
      for (let item of val) {
        if (sex == item.sex) {
          count++;
        }
      }
      return count;
    },
    getSong () {                      //歌曲总数
      allSong().then(res => {
        this.songCount = res.length;
      })
    },
    getSinger () {                      //歌手数量
      getAllSinger().then(res => {
        this.singerCount = res.length;
        this.singerSex.rows[0]['总数'] = this.setSex(0, res);
        this.singerSex.rows[1]['总数'] = this.setSex(1, res);
        this.singerSex.rows[2]['总数'] = this.setSex(2, res);
        this.singerSex.rows[3]['总数'] = this.setSex(3, res);
        for (let item of res) {
          this.getByCountry(item.location);
        }
      })
    },

    getSongList () {                    //歌单数量
      getAllSongList().then(res => {
        this.songListCount = res.length;
        for (let item of res) {
          this.getByStyle(item.style);
        }
      })
    },
    getByStyle (style) {              //根据歌单风格获取数量
      for (let item of this.songStyle.rows) {
        if (style.includes(item['风格'])) {
          item['总数']++;
        }
      }
    },
    getByCountry (location) {              //根据国籍获取数量
      for (let item of this.country.rows) {
        if (location.includes(item['国籍'])) {
          item['总数']++;
        }
      }
    }
  }
}

</script>

<style scoped>
.dashboard-container {
    padding: 20px;
    background-color: #121212;
    min-height: 100vh;
}

.stat-card {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.grid-content {
    display: flex;
    align-items: center;
    height: 120px;
}

.grid-cont-center {
    flex: 1;
    text-align: center;
}

.grid-num {
    font-size: 42px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.grid-title {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.section-title {
    color: white;
    margin-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-wrapper {
    margin-bottom: 30px;
}

.chart-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: #181818;
    padding: 15px;
}
</style>
